import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { UploadFile } from 'ng-zorro-antd';

@Component({
  selector: 'pic-viewer-modal',
  templateUrl: './pic-viewer-modal.component.html',
  styleUrls: ['./pic-viewer-modal.component.scss'],
})
export class PicViewerModalComponent implements OnInit, OnChanges {

  @Input() picList:any[] = []
  @Input() show:boolean = true
  @Input() picIdx:number = 0
  @Input() currFile: UploadFile;

  @Output() onClose:EventEmitter<any> = new EventEmitter();

  picNum:number = 0
  showPrev:boolean = false
  showNext:boolean = false


  constructor() { }

  ngOnInit() {
    let _self = this;
    this.picIdx =  this.picList.findIndex((p)=>p.imgKey == _self.currFile.imgKey);
    this.picIdx = this.picIdx < 0 ? 0 : this.picIdx;
    this.checkList();
    document.addEventListener('keydown',function (e) {
      if(e.keyCode === 37 ) {
        if(_self.showPrev){
          _self.doPrev()
        }
      }else if(e.keyCode === 39 ){
        if(_self.showNext){
          _self.doNext()
        }
      }
    }, false)
  }

  ngOnChanges(): void {
    this.checkList()
  }

  //上一页
  doPrev(){
    --this.picIdx
    this.checkList()
  }

  //下一页
  doNext(){
    ++this.picIdx
    this.checkList()
  }

  checkList(){
    this.picNum = this.picList?this.picList.length:0
    this.picIdx<=0 && (this.showPrev = false)
    this.picIdx>=this.picNum-1 && (this.showNext = false)
    this.picIdx>0 && (this.showPrev = true)
    this.picIdx<this.picNum-1 && (this.showNext = true)
  }

  close(){
    this.show = false
    this.onClose.emit(this.show)
  }
}
